/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-14 17:15:35
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-11-22 22:11:19
 * @FilePath: /three-react/src/pages/Camera/Camera1.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useEffect, useRef } from "react"
import createRender from '@/createRender';
import * as THREE from 'three'
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
import { GammaCorrectionShader } from "three/examples/jsm/shaders/GammaCorrectionShader.js";

const state = {}
export default function Page() {
  
  const container = useRef(null);
  useEffect(() => {
    if (!state.isMounted) {
      createRender(container)(render);
      state.isMounted = true;
    }
  }, [])
  const group = new THREE.Group();
  function render(scene, camera, renderer) {
    const loader = new GLTFLoader()
    loader.load('../../factory.glb', function(model) {
      // scene.add(model.scene)
      group.add(model.scene)
    })
    renderer.outputEncoding = THREE.sRGBEncoding;
    choose(scene, camera, renderer)
  }

  function choose(scene, camera, renderer) {
    const effectComposer = new EffectComposer(renderer)
    const renderPass = new RenderPass(scene, camera);
    effectComposer.addPass(renderPass);
    const { clientWidth, clientHeight } = container.current;
    const vector2 = new THREE.Vector2(clientWidth, clientHeight)
    const outlinePass = new OutlinePass(vector2, scene, camera);
   
    effectComposer.addPass(outlinePass);
    scene.add(group)


    const gammaPass = new ShaderPass(GammaCorrectionShader);
    effectComposer.addPass(gammaPass)

    document.getElementById('A')?.addEventListener('click', function() {
      const A = group.getObjectByName ('设备A');
      outlinePass.selectedObjects = [A]
    })
    document.getElementById('B')?.addEventListener('click', function() {
      const B = group.getObjectByName ('设备B');
      outlinePass.selectedObjects = [B]
    })

    function render() {
      effectComposer.render();
      // renderer.render(scene, camera);
      requestAnimationFrame(render);
    }
    render();
  }

  return (
    <div id="container" className="full container" ref={container}>

      <div className="center_x">
        <button id="A">A</button>
        <button id="B">B</button>
      </div>
    </div>
  )
}